<#include "../base/basic-page.ftl">
<#include "../common/table.ftl">
<#include "../common/modal.ftl">
<#include "../common/pagination.ftl">
<@page_head>

</@page_head>
<@page_body page_title="分类管理" side_active="/admin/goods/category">
    <div class="main-content container-fluid">
        <div class="row">
            <!--Responsive table-->
            <div class="col-sm-12">
                <@card_table>
                    <@card_header "分类列表">
                    </@card_header>

                    <@card_body>
                        <@table extra="table-striped table-hover">
                            <@table_tools>
                    <button class="btn btn-space btn-primary"
                            data-toggle="modal"
                            data-target="#add-category">
                        新增分类
                    </button>
                    <button class="btn btn-space btn-danger"
                            data-toggle="modal"
                            data-target="#md-del-user">
                        删除选中
                    </button>
                            </@table_tools>
                            <@table_head>
                        <th style="width:5%;">
                            <label class="custom-control custom-control-sm custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-label"></span>
                            </label>
                        </th>
                        <th style="width:35%;">分类名称</th>
                        <th style="width:10%;">上级分类</th>
                        <th style="width:5%;">商品数量</th>
                        <th style="width:10%;">更新时间</th>
                        <th style="width:10%;">创建时间</th>
                        <th style="width:15%;">操作</th>
                            </@table_head>
                            <@table_body>

                                <#list pageData.records as item>
                        <tr>
                            <td>
                                <label class="custom-control custom-control-sm custom-checkbox">
                                    <input type="checkbox" class="custom-control-input">
                                    <span class="custom-control-label"></span>
                                </label>
                            </td>
                            <td>
                                <#if item.type == 1>|----&nbsp;</#if>${item.name}
                            </td>
                            <td>
                                ${item.parentPath}
                            </td>
                            <td>
                                ${item.countNum!'0'}
                            </td>
                            <td class="cell-detail">
                                <span>${item.resolveUtime("yyyy年MM月dd日")}</span>
                                <span class="cell-detail-description">${item.resolveUtime("HH:mm")}</span>
                            </td>
                            <td class="cell-detail">
                            <#--<span>${recodrd.ctime}</span>-->
                                <span class="cell-detail-description">11:23</span>
                            </td>
                            <td>
                                <button class="btn btn-rounded btn-space btn-success"
                                        data-toggle="modal"
                                        data-target="#edit-category-${item.id}">
                                    配置
                                </button>
                                <button id="del-category-${item.id}" class="btn btn-rounded btn-space btn-danger del-category">
                                    删除
                                </button>
                            </td>
                        </tr>
                                </#list>
                            </@table_body>
                        </@table>
                        <@pagination pageData.current,pageData.size,pageData.total>
                        </@pagination>
                    </@card_body>
                </@card_table>
            </div>
        </div>
    </div>
<@modal id="add-category">

    <@modal_header title="添加分类">
    </@modal_header>

<form id="add-category-form" novalidate>
    <@modal_body>
            <div class="form-group">
                <label for="category-name">分类名称</label>
                <input class="form-control form-control-xs"
                       id="category-name" name="name"
                       autocomplete="off" type="text"
                       placeholder="请输入分类名称"
                       required data-parsley-error-message="请输入分类名称">
            </div>
            <div class="form-group">
                <label for="category-parent">上级分类</label>
                <select name="pid" id="category-parent" class="form-control form-control-xs">
                    <option value="-1" selected>无</option>
                    <#list topLevels as item>
                        <option value="${item.id}">${item.name}</option>
                    </#list>
                </select>
            </div>
            <div class="form-group">
                <label for="category-img">分类图片</label>
                <input class="form-control form-control-xs"
                       id="category-img" name="imgUrl"
                       placeholder="请输入分类图片地址"
                       autocomplete="off" type="url">
            </div>
            <div class="form-group">
                <label for="category-catIdsLink">映射淘宝类目</label>
                <input class="form-control form-control-xs"
                       id="category-catIdsLink" name="catIdsLink"
                       autocomplete="off" type="text"
                       data-parsley-pattern="(^[^,]+(,[^,]+)*@\d+(,\d+)*$|^@\d+(,\d+)*$)"
                       data-parsley-pattern-message="请输入正确格式的映射规则"
                       placeholder="请输入映射规则: keyword[,keywords]@catId[,catIds]">
            </div>
            <div class="form-group">
                <label for="category-orders">排序标识</label>
                <input class="form-control form-control-xs"
                       id="category-orders" name="orders"
                       placeholder="请输入排序标识（默认：0）"
                       autocomplete="off" type="number">
            </div>
    </@modal_body>
    <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
    </@modal_footer>
</form>
</@modal>
    <#list pageData.records as recordItem>
        <@modal id="edit-category-${recordItem.id}">

            <@modal_header title="编辑分类">
            </@modal_header>

<form id="edit-category-${recordItem.id}" class="edit-category" novalidate>
    <@modal_body>
            <input name="id" value="${recordItem.id}" style="opacity: 0;display: none;">
            <div class="form-group">
                <label for="edit-category-name">分类名称</label>
                <input class="form-control form-control-xs"
                       id="edit-category-name" name="name"
                       autocomplete="off" type="text"
                       placeholder="请输入分类名称"
                       value="${recordItem.name}"
                       required data-parsley-required-message="请输入分类名称">
            </div>
            <div class="form-group">
                <label for="edit-category-parent">上级分类</label>
                <select name="pid" id="edit-category-parent" class="form-control form-control-xs" disabled>
                    <option value="-1" <#if recordItem.getPid()??><#else >selected</#if>>无</option>
                    <#list topLevels as item>
                        <option value="${item.id}" <#if recordItem.getPid()??><#if recordItem.getPid()==item.id>selected</#if><#else ></#if>>${item.name}</option>
                    </#list>
                </select>
            </div>
            <div class="form-group">
                <label for="edit-category-img">分类图片</label>
                <input class="form-control form-control-xs"
                       id="edit-category-img" name="imgUrl"
                       value="${recordItem.imgUrl}"
                       autocomplete="off" type="url">
            </div>
            <div class="form-group">
                <label for="edit-category-catIdsLink">映射淘宝类目</label>
                <input class="form-control form-control-xs"
                       id="edit-category-catIdsLink" name="catIdsLink"
                       autocomplete="off" type="text"
                       data-parsley-pattern="(^[^,@]+(,[^,@]+)*@\d+(,\d+)*$|^@\d+(,\d+)*$|^[^,@]+(,[^,@]+)*$){1}"
                       data-parsley-pattern-message="请输入正确格式的映射规则"
                       value="${(recordItem.catIdsLink)!''}"
                       placeholder="请输入映射规则: keyword[,keywords]@catId[,catIds]">
            </div>
            <div class="form-group">
                <label for="edit-category-orders">排序标识</label>
                <input class="form-control form-control-xs"
                       value="${recordItem.orders}"
                       id="edit-category-orders" name="orders"
                       placeholder="请输入排序标识（默认：0）"
                       autocomplete="off" type="number">
            </div>
    </@modal_body>
    <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
    </@modal_footer>
</form>
        </@modal>
    </#list>
</@page_body>
<@page_foot>
<script src="/static/lib/parsley/parsley.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //initialize the javascript
        var cli = new S7BuyCli();
        cli.init();
        cli.initCategory();
    });
</script>
</@page_foot>